<template >
	<view :class="leng<=4?'contonts':'contont'" style="background-color: #F5F5F5;		
	">
		<!-- <view style="width: 100%;height: 45px;display: flex;background-color: #FFFFFF;border-top: 1px solid #f5f5f5;"> -->
			<!-- <view style="width: 50%;height: 100%; display: flex;align-items: center;justify-content: center;border-right: 1px solid #F5F5F5;" :class="activeClass == -1 ? 'active':''" @click="activeClass = -1">
					结算明细
			</view> -->
			<!-- view style="width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;" :class="activeClass == 0 ? 'active':''" @click="activeClass = 0">
				运单结算
			</view> -->
		<!-- </view> -->
<!-- 		<view class="" style="height: 603px;" >
			
				<view class="swttlem" >
			<view style="display: flex;align-items: center;width: 100%;justify-content: space-between;font-size: 12px;margin-top: 15px;">
				<text style="color: #777777;margin-left: 15px;margin-top: 8px;">2018.06.19</text>
				<view><text style="color: #4A4A4A;margin-top: 8px;">运费：</text><text style="color: #FF5651;margin-right: 15px;margin-top: 8px;">25</text></view>
			</view>
			<view style="margin-top: 10px;">
				<view style="font-size: 14px;color: #042A58;margin-left: 15px;">T0068541808140001</view>
				<view style="font-size: 13px; color: #888888;margin-left: 15px;margin-top: 5px;">重庆同城物流</view>
			</view>
			<view style="display: flex;align-items: center;width: 100%;justify-content: space-between;font-size: 12px;color: #4A4A4A;margin-top: 6px;">
				<text style="margin-left: 15px;">2018.06.19</text>
				<view style="margin-right: 15px;">电话:13657891238</view>
			</view>
		</view>
		</view> -->
	<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;height: 100%;width: 100%;" v-if="list.length==0">
		<image src="../../static/img/pic_shuju.png" mode="" style="width: 94px;height: 98px;margin-top: -400px;"></image>
		<text style="color: #000000;font-size: 18px;font-weight: 500;margin-top: 19px;">暂无运单数据</text>
		<text style="color: #777777;font-size: 15px;margin-top: 10px;">你可以尝试下拉刷新获取即时订单！</text>
	</view>
		<view class="swttled" v-if="list.length!=0" v-for="(v,i) in list" :key="i" @click="sett(i)">
			<view style="display: flex;align-items: center;justify-content:space-between;width: 100%;font-size: 12px;margin-top: 18rpx;">
				<view  style="display: flex;align-items: center;position: relative;" >
					<image src="../../static/img/img_jiesuan@2x.png" style="width: 70px;height: 30px;margin-right: 10px;"></image>
					<view style="color: #FFFFFF;font-size: 14px;position: absolute;left: 10px;top: 5px;">
					<text v-if="v.driverstatus == 4">待结算</text>
					<text v-if="v.driverstatus == 8">已结算</text>
					</view>
					<view>运费：<text style="color:#FF5651;font-size: 14px;font-weight: 500;" v-if="v.totalPrice!=NaN">{{v.typearrive+v.typebefore+v.typemonthly+v.typereceipt}}</text>
				<text style="color:#FF5651;font-size: 14px;font-weight: 500;" v-if="v.totalPrice==NaN">0</text></view>
				</view>
				<view style="display: flex;align-items: center;">
					<text>账单详情</text>
					<image src="../../static/img/icon_rightyuan@2x.png" mode="" style="width: 14px;height: 14px;margin-left: 10px;margin-right: 10px;"></image>
				</view>
			</view>
			<view  style="display: flex;align-items: center;justify-content: space-between;width: 100%;margin-top: 13px;">
				<view  style="font-size: 14px;color: #4A4A4A; display: flex;align-items: center;">
					<text style="margin-left: 12px;
					width: 60PX;
					text-align: center;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					">{{v.startstationname}}</text>
					<image src="../../static/img/icon_xiaojiantou@2x.png" mode="" style="width: 20px;height: 8px;margin-left: 15px;margin-right: 15px;"></image>
					<text style="
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					text-align: center;
					width: 90PX;
					">{{v.endstationname}}</text>
				</view>
				<view  style="font-size: 12px;color: #777777; margin-right: 10px;display: flex;align-items: center;">
					<view style="width: 80px;overflow: hidden;height: 15px;">{{v.drivertime}}</view>
					到
				</view>
			</view>
			<view  style="display: flex;align-items: center;justify-content: space-between;width: 100%;margin-top: 8px;">
				<view  style="font-size: 12px;color: #4A4A4A; display: flex;align-items: center;margin-left: 12px;">
				<text>联系人:{{v.esusername}}</text>
				</view>
				<view  style="font-size: 12px;color:#4A4A4A; margin-right: 10px;">
					电话:{{v.sendTel}}
				</view>
			</view>
			<image src="../../static/img/line_xuxian%20copy%206@2x.png" mode="" style="width: 100%;height: 1px;"></image>
			<view class="" style="display: flex;align-items: center;justify-content: space-around;font-size: 12px;margin-bottom: 20rpx;">
				<view class="" style="height: 32px; display: flex;align-items: center;flex-direction: column;justify-content: space-between;">
					<text style="color:#FF5651">{{v.typebefore}}</text>
					<text>现付</text>
				</view>
				<view class="" style="height: 32px; display: flex;align-items: center;flex-direction: column;justify-content: space-between;">
					<text style="color:#FF5651">{{v.typearrive}}</text>
					<text>到付</text>
				</view>
				<view class="" style="height: 32px; display: flex;align-items: center;flex-direction: column;justify-content: space-between;">
					<text style="color:#FF5651">{{v.typereceipt}}</text>
					<text>回单付</text>
				</view>
				<view class="" style="height: 32px; display: flex;align-items: center;flex-direction: column;justify-content: space-between;">
					<text style="color:#FF5651">{{v.typemonthly}}</text>
					<text>月结</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var page=1; var timer=null ;var that=this
	import {ajaxs} from '../../apis.js'
	export default {
		data() {
			return {
				activeClass:-1,
				list:[],
				leng:""
			}
		},
		onLoad() {
			ajaxs({
				url:"/v1/driver/order/statistics",
				method:"post",
				data:{
					endtime:"2020-03"
				},
				success(res){
					
				}
			})
			var that=this
				this.getNews()
				  uni.startPullDownRefresh() 
		},
		filters:{
					 addZero(data){
						 return data.toFixed(2)
					 }
		},
		onPullDownRefresh() {
			this.getNews()
		},
		onReachBottom() {
			var that=this
			this.getMoreNews()
			if( timer!=null){clearTimeout(timer)}
			timer=setTimeout(function(){that.getMoreNews()},500)
		},
		methods: {
			sett(i){
				uni.navigateTo({
					url:"./settlementlist?id="+this.list[i].id+"&&type="+this.list[i].type
				})
			},
			getMoreNews(){
				this.loadingTxt="加载中"
				var that=this
					var header;
					 ajaxs({
					      url: "/v1/driver/order/settleList",
							method:"post",
							data:{offset:page,
							limit:1
							},	  
					      success(res) {
							  if(that.list.length==res.data.total){
								  that.loadingTxt="已经全部加载"
								    uni.hideNavigationBarLoading()
								  return false
							  }
							   uni.hideNavigationBarLoading()
							   // console.log(res.data.list.id)
					  // that.list=res.data.list
					  var list=res.data.list
					  
					  that.list=that.list.concat(list)
					  uni.stopPullDownRefresh()
					  page++
					  that.loadingTxt="加载更多"
					      //请求成功的处理
					      },
						
					    })
			},
			getNews(){
				var that=this
				page=1;
					 ajaxs({
					      url: "/v1/driver/order/settleList",
							method:"post",
						data:{offset:page,
						limit:10
						},
					      success(res) {
					  that.list=res.data.list
					  that.leng=that.list.length
					 uni.stopPullDownRefresh()
					  uni.hideNavigationBarLoading()
					  page++
					      //请求成功的处理
					      },
						
					    })
			},
		}
	}
</script>

<style>
	.contonts{
		width: 100%;
		height: 663px;
		position: relative;
		display: flex;
		flex-direction:column ;
		align-items: center;
	}
.active{
	color: #042A58;
	border-bottom: 1px solid #042A58;
}
.swttlem{
	width: 340px;
	height: 110px;
	background: #FFFFFF;
	margin-top: 20rpx;
}
.swttled{
	width:340px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	margin-top: 10px;
}
</style>
